<!--
 * @author luguoxiang
 * @date 2022/9/17
 * 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <edit-container ref="containerRef" header="分配组织" width="1000px" destroy-on-close @confirm="submit">
    <lg-table :schema="schema" :data="data" :actionbar="{ width: 60 }">
      <template #toolbar-left>
        <btn-tool-add @click="addItem" />
      </template>
      <template #main="{ row, rowIndex }">
        <t-radio v-model:checked="row.main" @change="mainchange(rowIndex)" />
      </template>
      <template #orgId="{ row }">
        <lg-biz-tree v-slot="{ options }" :data="orgApi.query">
          <t-cascader v-model="row.orgId" :options="options" check-strictly @change="onOrgChange(row)" />
        </lg-biz-tree>
      </template>
      <template #postId="{ row }">
        <lg-biz-select
          v-if="row.orgId"
          v-model="row.postId"
          :data="postApi.query"
          :filters="'orgId=' + row.orgId"
          @change="onchange"
        />
      </template>
      <!-- 操作栏 -->
      <template #actionbar="{ rowIndex }">
        <btn-row-remove @click="delItem(rowIndex)" />
      </template>
    </lg-table>
  </edit-container>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Radio } from 'tdesign-vue-next';
import { EditContainer } from '@/components';
import { ITableSchema, LgBizTree, nextId, notEmpty } from '@/soar';
import api from './api';
import orgApi from '../org/api';
import postApi from '../post/api';
import LgTable from '@/soar/components/LgTable/Table.vue';
import LgBizSelect from '@/soar/components/LgBizSelect/index.vue';

const emits = defineEmits(['ok']);

const schema: ITableSchema<any>[] = [
  {
    field: 'main',
    label: '主要的',
    dataType: 'boolean',
    slots: 'main',
    width: 70,
  },
  {
    field: 'orgId',
    label: '组织',
    dataType: 'string',
    slots: 'orgId',
  },
  {
    field: 'postId',
    label: '职位',
    dataType: 'string',
    slots: 'postId',
    width: 200,
  },
];

const containerRef = ref();
const mainIds = ref([]);
const data = ref([]);
const loading = ref(false);

function addItem() {
  data.value.push({
    key: nextId(),
    main: data.value.length === 0,
    orgId: '',
    postId: '',
  });
}

function delItem(index) {
  data.value.splice(index, 1);
}

function valueable(row) {
  return row.main || row.orgId || row.postId;
}

function mainchange(index) {
  onchange();
  if (data.value[index].main) {
    for (let i = 0; i < data.value.length; i++) {
      if (i === index) {
        continue;
      }
      data.value[i].main = false;
    }
  }
}

function onOrgChange(row) {
  row.postId = '';
  onchange();
}

function onchange() {
  const row = data.value[data.value.length - 1];
  if (valueable(row)) {
    addItem();
  }
}

function submit() {
  const posts = data.value.filter(valueable);
  for (let i = 0; i < posts.length; i++) {
    notEmpty(posts[i].postId, `请选择第${i + 1}行的岗位`);
  }
  api
    .setPosts({ userIds: mainIds.value, posts })
    .then(() => {
      containerRef.value.close();
      emits('ok');
    })
    .finally(() => {
      loading.value = false;
    });
  loading.value = true;
}

defineExpose({
  open(ids) {
    if (Array.isArray(ids)) {
      notEmpty(ids, '请选择至少一条数据');
      data.value = [];
    } else {
      api.getPosts(ids).then((res) => {
        data.value = res;
      });
      ids = [ids];
    }
    containerRef.value.open();
    mainIds.value = ids;
    addItem();
  },
});
</script>
